<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // Model模型数据
        var msg = '<h3>wel\nco\tme</h3>'

        // ViewModel视图模型
        window.onload = function(){
            var h4Dom = document.getElementById('h4Dom')
            var inputDom = document.getElementById('inputDom')

            // h4Dom.innerHTML = msg
            // h4Dom.innerText = msg
            h4Dom.textContent = msg
            inputDom.value = msg

            // 为dom对象动态的绑定事件
            inputDom.addEventListener('input',function(){
                // console.log(this) // this表示事件源
                // console.log(this.value)
                msg = this.value  // View ————————> Model
                // console.log(msg)
                h4Dom.innerText = msg
            })
        }

    </script>
</head>
<body>
    <!-- view视图 -->
    <div>
        <h4 id="h4Dom"></h4>
        <input type="text" id="inputDom">
    </div>
</body>
</html>